<template>
	<view :style="{padding:`${$safeh}px 32rpx `}">
		<!-- <view class="">
			用水单位：xxx单位
		</view>
		<view class="u-m-tb-30">
			用水量：230m³
		</view> -->
		<view class="charts-box">
			<qiun-data-charts type="column" :ontouch="true" :opts="chartOptions" :chartData="chartData" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {},
				resdata: {},
				chartOptions: {
					// 图表配置
					xAxis: {
						type: 'category',
						disableGrid: true,
						itemCount: 7, // 单屏最多显示 7 个标签
						scrollShow: true, // 显示滚动条
						scrollAlign: 'left', // 滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', // 滚动条背景颜色
						scrollColor: '#DEE7F7', // 滚动条颜色
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 8
					},
					
					enableScroll: true // 开启滚动功能
				}
			};
		},
		// onReady() {
		// 	this.getServerData();
		// },
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				var that = this
				that.$api.get('/getWaterStatistics').then(res => {
					that.resdata = {
						categories: res.data.data.map(item => item.day),
						series: [{
							name: "用水量",
							data: res.data.data.map(item => item.daily_flow),
						}],
					}
					that.getServerData();
					that.total_flow = res.data.total_flow
				})
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				// let res = {
				// 	categories: ["2016", "2017", "2018", "2019","2016", "2017", "2018", "2019","2016", "2017", "2018", "2019"],
				// 	series: [{
				// 			name: "用水量",
				// 			data: [35, 36, 31, 33,35, 36, 31, 33,35, 36, 31, 33]
				// 		},

				// 	],
				// };
				this.chartData = JSON.parse(JSON.stringify(this.resdata));
			},
		}
	}
</script>

<style lang="scss">
	.charts-box {
		width: 100%;
		height: 300px;
		margin: 60rpx 0;
	}
</style>